<template>
	<view>
		<view class="header-wrapper">
			<image class="topbg" src="https://youlinapi.zhihui361.com/image/wx/helpbg.png" mode=""></image>
			<view class="header-top">
				<view class="header-inner fa" :style="{paddingTop: utils.menuButtonTop(), height: utils.menuButtonHeight(), background: opacity}">
					<image class="backimg" src="../../static/back2.png" mode="" @click="utils.pageBack()"></image>
					<view class="header-title">订单详情</view>
				</view>
				<view class="header-place" :style="{paddingTop: utils.menuButtonTop(), height: utils.menuButtonHeight()}"></view>
			</view>
		</view>
		<view class="main pr">
			<view class="status-box fa jcc">
				<image class="status-icon" src="../../static/orderstate1.png" mode="" v-if="info.state == 1"></image>
				<image class="status-icon" src="../../static/orderstate2.png" mode="" v-if="info.state == 2"></image>
				<image class="status-icon" src="../../static/orderstate3.png" mode="" v-if="info.state == 3"></image>
				<view v-if="info.state == 1">等待配送员接单</view>
				<view v-if="info.state == 2">配送员送单中</view>
				<view v-if="info.state == 3">已完成</view>
				<view v-if="info.state == 4">已取消</view>
			</view>
			<view class="fetch-bottom">
				<view class="address-list flex">
					<image class="receive-icon" src="../../static/fetch.png" mode=""></image>
					<view class="flex1">
						<view class="fa">
							<view class="name">{{info.fetchName}}</view>
							<view class="mobile">{{info.fetchPhone}}</view>
						</view>
						<view class="address">{{info.fetchEstate}}{{info.fetchDetails}}</view>
					</view>
				</view>
				<view class="address-list flex">
					<image class="receive-icon" src="../../static/receive.png" mode=""></image>
					<view class="flex1">
						<view class="fa">
							<view class="name">{{info.sendName}}</view>
							<view class="mobile">{{info.sendPhone}}</view>
						</view>
						<view class="address">{{info.sendEstate}}{{info.sendDetails}}</view>
					</view>
					<view class="after"></view>
				</view>
			</view>
			<view class="money-box" v-if="info.state == 2 || info.state == 3">
				<view class="money-list fa jcsb">
					<view>配送员信息</view>
					<view class="fa">
						<image class="avatar" :src="info.courier.avatar" mode=""></image>
						<view>{{info.courier.name}}</view>
						<image class="mobile" src="../../static/mobile.png" mode="" @click="phoneCall"></image>
					</view>
				</view>
			</view>
			<view class="money-box">
				<view class="money-list fa jcsb" v-if="info.productType">
					<view>物品类型</view>
					<view class="cl3">{{info.productType}}</view>
				</view>
				<view class="money-list fa jcsb" v-if="info.weight">
					<view>货物重量</view>
					<view class="cl3">{{info.weight}}kg</view>
				</view>
			</view>
			<view class="info-box">
				<view class="fa jcsb">
					<view>订单取货码</view>
					<view class="code">{{info.code}}</view>
				</view>
			</view>
			<view class="info-box">
				<view>备注</view>
				<view class="prompt">{{info.memo || '无'}}</view>
			</view>
			<view class="info-box">
				<view>特殊要求</view>
				<view class="prompt">{{info.specialMemo || '无'}}</view>
				<view class="upload-wrapper">
					<view class="upload-box flex fww">
						<view class="upload-list" v-for="(item, index) in imageList" :key="index">
							<image :src="item" @click="utils.previewImage(imageList, index)"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="money-box">
				<view class="money-list flex">
					<view style="margin-right: 30rpx;">发货时间</view>
					<view class="red flex1 flex jcfe">
						<view style="margin-right: 10rpx;">{{info.today}}</view>
						<view>{{info.receivingTime}}</view>
						<view style="margin: 0 4rpx;"> ~ </view>
						<view>{{info.receivingEndTime}}</view>
					</view>
				</view>
			</view>
			<view class="money-box">
				<view class="money-list fa jcsb">
					<view>订单编号</view>
					<view class="cl3">{{info.ordersNo}}</view>
				</view>
				<view class="money-list fa jcsb">
					<view>下单时间</view>
					<view class="cl3">{{info.createTime}}</view>
				</view>
			</view>
		</view>
		<view class="fixed-bottombar" v-if="info.state == 1 || info.state == 2 || info.state == 3 || info.state == 4">
			<view class="bottombar-box fa jcfe">
				<view class="cancel-btn" @click="cancelOrder" v-if="info.state == 1">取消订单</view>
				<view class="cancel-btn" @click="phoneCall" v-if="info.state == 2">联系配送员</view>
				<view class="ack-btn" @click="confirmReceive" v-if="info.state == 2">确认收货</view>
				<view class="ack-btn" @click="commentRider" v-if="info.state == 3">评价配送员</view>
			</view>
			<view class="fixed-place"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				opacity: 'rgba(255,255,255,0)',
				id: '',
				info: {
					sendEstate: '',
					sendDetails: '',
					sendName: '',
					fetchEstate: '',
					fetchDetails: '',
					fetchName: '',
					receivingTime: '',
					receivingEndTime: '',
					originMoney: '',
					money: '',
					memo: '',
					ordersNo: '',
					type: '',
					createTime: '',
					state: '',
					weight: '',
					code: '',
					memo: '',
					specialMemo: '',
					receivingTime: '',
					receivingEndTime: '',
					ordersNo: '',
					createTime: ''
				},
				addressSendId: 1,
				addressId: 1,
				goods: [],
				imageList: []
			};
		},
		onLoad(options) {
			if(options.id) {
				this.id = options.id
				this.getInfo()
			}
		},
		onPageScroll(e) {
			this.opacity = 'rgba(24,201,84,' + this.utils.opacityCompute(e.scrollTop) + ')'
		},
		methods: {
			// 订单详情
			getInfo() {
				this.api.orderInfoFunc({
					ordersId: this.id
				}).then(res => {
					if(res.code == 200) {
						this.info = res.data
						this.info.today = this.info.day.substr(5, 2) + '.' + this.info.day.substr(8, 2)
						if(res.data.specialMemoImg) {
							this.imageList = res.data.specialMemoImg.split(',')
						}
					}
				})
			},
			// 联系配送员
			phoneCall() {
				let phoneNumber = String(this.info.courier.phone)
				uni.makePhoneCall({
					phoneNumber: phoneNumber
				})
			},
			// 取消订单
			cancelOrder() {
				uni.showModal({
					title: '提示',
					content: '是否取消订单',
					success: result => {
						if(result.confirm) {
							this.api.orderUpdateFunc({
								ordersId: this.id,
								state: 4
							}).then(res => {
								if(res.code == 200) {
									uni.showToast({
										title: '订单已取消'
									})
									setTimeout(() => {
										uni.navigateBack()
									})
								}else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							}).catch(err => {
								uni.showToast({
									title: '操作失败',
									icon: 'none'
								})
							})
						}
					}
				})
			},
			// 确认收货
			confirmReceive() {
				uni.showModal({
					title: '提示',
					content: '是否确认收货',
					success: result => {
						if(result.confirm) {
							this.api.orderUpdateFunc({
								ordersId: this.id,
								state: 3
							}).then(res => {
								if(res.code == 200) {
									uni.showToast({
										title: '已确认收货'
									})
									setTimeout(() => {
										uni.navigateBack()
									}, 1500)
								}else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							}).catch(err => {
								uni.showToast({
									title: '操作失败',
									icon: 'none'
								})
							})
						}
					}
				})
			},
			// 评价配送员
			commentRider() {
				uni.redirectTo({
					url: '/pages/order/comment_rider?id=' + this.info.courierId + '&ordersId=' + this.info.ordersId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header-wrapper{
		.topbg{
			position: fixed;
			top: 0;
			width: 100%;
		}
		.header-inner{
			position: fixed;
			z-index: 999;
			left: 0;
			right: 0;
			padding-bottom: 16rpx;
			padding-left: 32rpx;
			padding-right: 32rpx;
			.backimg{
				width: 48rpx;
				height: 48rpx;
			}
			.header-title{
				position: absolute;
				left: 200rpx;
				right: 200rpx;
				text-align: center;
				font-size: 34rpx;
				color: #fff;
			}
		}
		.header-place{
			padding-bottom: 16rpx;
		}
	}
	.main{
		padding-bottom: 30rpx;
	}
	.status-box{
		height: 80rpx;
		font-size: 32rpx;
		color: #fff;
		.status-icon{
			margin-right: 16rpx;
			width: 44rpx;
			height: 44rpx;
		}
	}
	.fetch-bottom{
		margin: 20rpx 24rpx 0;
		padding: 2rpx 30rpx 34rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.address-list{
			position: relative;
			margin-top: 38rpx;
			&:last-child{
				.after{
					position: absolute;
					left: 23rpx;
					top: -64rpx;
					width: 2rpx;
					height: 60rpx;
					border-left: 2rpx dashed #BDBDBD;
					&.noaddr{
						top: -46rpx;
					}
				}
			}
			.receive-icon{
				margin-top: 4rpx;
				margin-right: 14rpx;
				width: 46rpx;
				height: 40rpx;
			}
			.mobile{
				margin-left: 36rpx;
			}
			.address{
				margin-top: 14rpx;
				font-size: 24rpx;
				color: #898989;
			}
		}
	}
	.money-box{
		margin: 20rpx 24rpx 0;
		padding: 0 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.money-list{
			padding: 30rpx 0;
			border-bottom: 1rpx solid var(--border);
			&:last-child{
				border-bottom: none;
			}
			.red{
				font-size: 26rpx;
				font-weight: bold;
				color: #FE3134;
			}
			.left{
				width: 140rpx;
			}
			.right{
				flex: 1;
				text-align: right;
			}
			.avatar{
				margin-right: 22rpx;
				width: 60rpx;
				height: 60rpx;
				border-radius: 8rpx;
			}
			.mobile{
				margin-left: 12rpx;
				width: 34rpx;
				height: 34rpx;
			}
		}
	}
	.info-box{
		margin: 20rpx 24rpx 0;
		padding: 30rpx;
		border-radius: 20rpx;
		background-color: #fff;
		.code{
			font-size: 34rpx;
			font-weight: bold;
		}
		.prompt{
			margin-top: 20rpx;
			font-size: 26rpx;
			color: #777;
		}
		.upload-wrapper{
			border-radius: 10rpx;
			.upload-box{
				margin-top: 26rpx;
			}
			.upload-list{
				margin-right: 16rpx;
				margin-bottom: 16rpx;
				width: 152rpx;
				height: 152rpx;
				&:nth-child(3n) {
					margin-right: 0;
				}
				image{
					width: 152rpx;
					height: 152rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
	.fixed-bottombar{
		.bottombar-box{
			position: fixed;
			z-index: 99;
			bottom: env(safe-area-inset-bottom);
			left: 0;
			right: 0;
			padding: 0 28rpx;
			height: 120rpx;
			background-color: #fff;
			.cancel-btn{
				margin-left: 20rpx;
				padding: 0 50rpx;
				height: 68rpx;
				line-height: 68rpx;
				border: 2rpx solid #aaa;
				border-radius: 34rpx;
				color: #777;
			}
			.ack-btn{
				margin-left: 20rpx;
				padding: 0 50rpx;
				height: 68rpx;
				line-height: 68rpx;
				border: 2rpx solid #18C954;
				border-radius: 34rpx;
				color: #18C954;
			}
		}
		.fixed-place{
			height: calc(120rpx + env(safe-area-inset-bottom));
		}
	}
</style>
